<template>
  <div class="container">
    <el-row>
      <el-col :span="6">【题型】 ：{{goodList.questionType | questionType}}</el-col>
      <el-col :span="6">【编号】 ：{{goodList.id}}</el-col>
      <el-col :span="6">【难度】 ：{{goodList.difficulty | difficulty}}</el-col>
      <el-col :span="6">【标签】 ：{{goodList.tags}}</el-col>
      <el-col :span="6">【学科】 ：{{goodList.subject}}</el-col>
      <el-col :span="6">【目录】 ：{{goodList.catalog}}</el-col>
      <el-col :span="6">【方向】 ：{{goodList.direction}}</el-col>
    </el-row>
    <hr />
    <div>【题干】:</div>
    <p style="color:blue;" v-html="goodList.question">{{goodList.question}}</p>
    <p>{{goodList.questionType | questionType}}题选项:(一下选中的选型为正确答案)</p>
    <!-- 单选框 -->
    <div class="check" v-for="(item,index) in questionList.options" :key="index">
      <el-radio v-model="radio" :label="item.isRight">{{item.title}}</el-radio>
    </div>
    <hr />
    <div>
      【参考答案】:
      <el-button @click="Isshow=true" type="danger">视频答案预览</el-button>
    </div>
    <video controls v-if="Isshow" class="video" :src="goodList.videoURL"></video>
    <hr />【答案解析】:
    <div class="answer" v-html="goodList.answer"></div>
    <hr />【题目备注】:
    <div class="answer" v-html="goodList.remarks"></div>
  </div>
</template>

<script>
import instance from '@/utils/request'
export default {
  props: {
    goodList: {
      type: Object,
      required: true,
    },
  },
  filters: {
    questionType(num) {
      if (num == 1) {
        return '单选'
      } else if (num == 2) {
        return '多选'
      } else {
        return '简答'
      }
    },
    difficulty(num) {
      if (num == 1) {
        return '简单'
      } else if (num == 2) {
        return '一般'
      } else {
        return '困难'
      }
    },
    chkState(num) {
      if (num == 0) {
        return '待审核'
      } else if (num == 1) {
        return '已审核'
      } else {
        return '已拒绝'
      }
    },
  },
  data() {
    return {
      questionList: {},
      radio: 1,
      checkList: 1,
      Isshow: false,
    }
  },
  created() {
    // this.getQuestions()
  },
  methods: {
    async getQuestions() {
      // this.questionList = null
      try {
        const { data: res } = await instance({
          method: 'GET',
          url: `/questions/${this.goodList.id}`,
        })
        console.log(res)
        // console.log('出发了')
        this.questionList = res
      } catch (err) {
        console.log(err)
        this.$message('获取数据失败')
      }
    },
    closeVedio() {
      this.Isshow = false
    },
  },
}
</script>

<style scoped lang='less'>
.el-col {
  margin-bottom: 20px;
}
.check {
  margin-bottom: 10px;
}
.answer {
  display: inline-block;
}
.video {
  width: 400px;
  height: 200px;
}
</style>
